<template>
  <div>
    <div class="main">
      <eagle-datepicker-local
        :labelName="'年度'"
        :formatName="'YYYY'"
        @CallBack="datepickerformat"
        :timeName="form.Year"
      ></eagle-datepicker-local>
      <eagle-radio-group
        required
        label="演练类型"
        v-model="form.DrillType"
        name="DrillType"
        direction="horizontal"
        :dataSource="form.DrillTypeList"
      ></eagle-radio-group>
      <eagle-input
        class="input_text"
        label="演练名称"
        placeholder="请输入"
        isInputText
        v-model="form.DrillName"
        required
      >
      </eagle-input>
      <van-field
        name="FileName"
        v-model="form.FileName"
        label="对应预案"
        class="input_text"
        required
        readonly
        placeholder="请选择"
        @click-input="fileChooseDialogShow = true"
      >
        <template #button>
          <van-icon
            name="cross"
            @click="clearFileCode"
          />
        </template>
      </van-field>
      <eagle-date
        label="开始时间"
        required
        :IsCurrentTime="false"
        :date.sync="form.DrillStartDate"
      ></eagle-date>
      <eagle-date
        label="结束时间"
        required
        :IsCurrentTime="false"
        :date.sync="form.DrillEndDate"
      ></eagle-date>
      <van-field
        readonly
        name="OriginatingDeptName"
        v-model="form.OriginatingDeptName"
        label="组织部门"
        class="input_text"
        placeholder="请选择"
        @click-input="goDeptment"
        required
      >
        <template #button>
          <van-icon
            name="cross"
            @click="clearOrgCode"
          />
        </template>
      </van-field>
      <van-field
        readonly
        name="PartDeptName"
        class="input_text"
        v-model="form.PartDeptName"
        label="参与部门"
        placeholder="请选择"
        type="textarea"
        autosize
        rows="1"
        @click-input="deptmentPartShow = true"
        required
      >
        <template #button>
          <van-icon
            name="cross"
            @click="clearOrgPartCode"
          />
        </template>
      </van-field>
      <eagle-input
        class="input_text"
        label="应急演练范围"
        placeholder="请输入"
        isInputText
        v-model="form.DrillRange"
        type="textarea"
        autosize
        required
      >
      </eagle-input>
      <eagle-input
        class="input_text"
        label="应急演练目标"
        placeholder="请输入"
        isInputText
        autosize
        v-model="form.DrillTarget"
        type="textarea"
        required
      >
      </eagle-input>
      <div class="bottom-btns">
        <eagle-button
          type="primary"
          class="submit-two"
          @click="_submit('0')"
        >
          提交
        </eagle-button>
        <eagle-button
          class="submit-two ml-10"
          type="info"
          @click="_submit('1')"
        >
          暂存
        </eagle-button>
      </div>
    </div>
    <deptment-choose
      :show.sync="deptmentShow"
      :selectedValue="form.OriginatingDeptCode"
      @callback="_chooseDeptmentCb"
      :isMulti="false"
      ref="deptmentChoose"
    >
    </deptment-choose>
    <!--参与部门-->
    <deptments-choose
      :show.sync="deptmentPartShow"
      :selectedValue="form.PartDeptCode"
      @callback="_chooseDeptmentPartCb"
      :isMulti="true"
      ref="deptmentChoose"
    >
    </deptments-choose>
    <!--预案文件弹框-->
    <file-choose
      :show.sync="fileChooseDialogShow"
      :selectedValue="form.FileCode"
      @callback="fileChooseCallback"
      :isMulti="false"
    >
    </file-choose>
  </div>
</template>

<script>
import DivDatepickerLocal from "../../../components/Attach/DivDatepickerLocal.vue";
import DeptmentChoose from "@/views/components/department/departmentChooseDialog.vue";
import DeptmentsChoose from "@/views/components/department/departmentChooseDialog.vue";
import fileChoose from "@/views/components/plan/planEmergencyFileDialog.vue";
export default {
  components: {
    fileChoose,
    DeptmentChoose,
    DeptmentsChoose,
    DivDatepickerLocal,
  },
  data() {
    return {
      depTagData: [],
      fileChooseDialogShow: false,
      id: this.$route.query.id,
      filter: {
        id: this.$route.query.id,
      },
      form: { FileName: "" },
      deptmentShow: false,
      deptmentPartShow: false,
    };
  },
  created() {
    if (this.id > 0) {
      this.getDetail();
    } else {
      this.initData();
    }
  },
  methods: {
    goDeptment() {
      this.deptmentShow = true;
    },
    //文件选择
    fileChooseCallback(item) {
      this.form.FileCode = item.fileCode;
      this.form.FileName = item.fileName;
      this.form.PlanType = item.planType;
      this.fileChooseDialogShow = false;
    },
    _chooseDeptmentCb(item) {
      this.form.OriginatingDeptName = item.name;
      this.form.OriginatingDeptCode = item.code;
      this.deptmentShow = false;
    },
    _chooseDeptmentPartCb(deplist) {
      this.depTagData = [];
      if (deplist) {
        const code = deplist.map((item) => {
          return item.code;
        });
        const name = deplist.map((item) => {
          return item.name;
        });
        this.depTagData = deplist;
        this.form.PartDeptName = name.join(",");
        this.form.PartDeptCode = code.join(",");
      }
      this.deptmentPartShow = false;
    },
    clearOrgCode() {
      this.form.OriginatingDeptCode = "";
      this.form.OriginatingDeptName = "";
      this.$refs.deptmentChoose.clearOrgCode();
    },
    clearOrgPartCode() {
      this.form.PartDeptName = "";
      this.form.PartDeptCode = "";
    },
    clearFileCode() {
      this.form.FileCode = "";
      this.form.FileName = "";
      this.form.PlanType = "";
    },
    datepickerformat(time) {
        this.form.Year = time;
    },
    getDetail() {
      let _this = this;
      _this.$axios
      .get("/PlanSimpleDrillPlan/GetDetail",{params:_this.filter})
      .then((res) => {
        _this.form = res.data;
      });
    },
    initData() {
      let _this = this;
      _this.$axios
      .get("/PlanSimpleDrillPlan/InitNewEntity",{params:_this.filter})
      .then((res) => {
        _this.form = res.data;
        _this.form.FileName = "";
      });
    },
    // 保存
    _submit(saveNum) {
      if (!this.form.Year) {
        this.$toast("请选择年度");
        return;
      }
      if (!this.form.DrillType) {
        this.$toast("请选择演练类型");
        return;
      }
      if (!this.form.DrillName) {
        this.$toast("请输入演练名称");
        return;
      }
      if (!this.form.PlanType) {
        this.$toast("请选择对应的预案文件");
        return;
      }
      if (!this.form.DrillStartDate) {
        this.$toast("请选择开始时间");
        return;
      }
      if (!this.form.DrillEndDate) {
        this.$toast("请选择结束时间");
        return;
      }
      if (!this.form.DrillRange) {
        this.$toast("请输入演练范围");
        return;
      }
      if (!this.form.DrillTarget) {
        this.$toast("请输入演练目标");
        return;
      }
      if (!this.form.OriginatingDeptCode && !this.form.OriginatingDeptName) {
        this.$toast("请选择组织部门");
        return;
      }
      let _this = this;
      if (saveNum == "0") {
        _this.form.IsPublish = "true";
      }
      _this.$axios
      .post("/PlanSimpleDrillPlan/PostData",this.form)
        .then((res) => {
          _this.$toast("保存成功");
          _this.loading = false;
          setTimeout(() => {
            _this.$router.goRefresh();
          }, 500);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
};
</script>

<style lang="less">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
// .bottom-buttons {
//   width: 100%;
//   position: fixed;
//   bottom: 0;
//   left: 0;
//   .submit-button {
//     width: 50%;
//     float: left;
//     border: none;
//     border-radius: 0;
//   }
//   .save-btn {
//     width: 50%;
//     float: left;
//     border: none;
//     border-radius: 0;
//   }
// }
.bottom-btns {
  margin-top: 10px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .submit-btn {
    width: 30%;
    height: 30px;
    font-size: 12px;
  }
  .submit-only {
    width: 100%;
    height: 30px;
    font-size: 12px;
  }
  .submit-two {
    width: 48%;
    height: 1rem;
    font-size: 12px;
  }
}
</style>
<style lang="less" scoped>
.space-between {
  justify-content: space-between;
}
</style>
